<template>
	<view>
		<view class="uni-padding-wrap">
			<!-- 评论区 start -->
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="item in replyList">
					<view class="uni-comment-face"><image :src="item.owner.ownerIcon" mode="widthFix"></image></view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{ item.owner.ownerName }}</text>
						</view>
						<view class="uni-comment-date">
							<text>{{ item.comTime | formatDate2 }}</text>
						</view>
						<view class="uni-comment-content">{{ item.comComment }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出输入框 -->
		<view @touchmove.stop.prevent="">
			<button @click="showReplyInput" style="bottom: 0px !important;">回复</button>
			<ygc-comment ref="ygcComment" :placeholder="'添加回复'" @pubComment="pubComment"></ygc-comment>
		</view>
	</view>
</template>

<script>
import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
export default {
	components: {
		ygcComment
	},
	data() {
		return {
			title: '评论界面',
			replyList: [],
			parentId: ''
		};
	},
	onLoad(options) {
		this.parentId = options.parentId;
		this.getReplyListData(options.parentId);
	},
	methods: {
		//弹出并显示输入框
		showReplyInput() {
			if (this.$store.state.userInfo.ownerId) {
				this.$refs.ygcComment.toggleMask('show');
			} else {
				uni.navigateTo({
					url: '../public/login-name'
				});
			}
		},
		//获取所有的回复信息列表
		getReplyListData(parentId) {
			uni.request({
				url: this.baseurl + '/comment/replyList/' + parentId,
				success: res => {
					this.replyList = res.data.data;
				}
			});
		},
		pubComment(text) {
			uni.showToast({
				icon: 'success',
				duration: 500,
				success: () => {
					//如果评论内容不为空就可以发送
					if (text) {
						this.addReply(text);
					} else {
						uni.showToast({
							icon: 'none',
							title: '输入内容不能为空！'
						});
					}
				}
			});
		},
		//添加回复
		addReply(text) {
			uni.request({
				url: this.baseurl + '/comment/add',
				data: {
					ownerName: this.$store.state.userInfo.ownerName,
					comComment: text,
					parentId: this.parentId,
					ownerId: this.$store.state.userInfo.ownerId,
					activityId: -1
				},
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						//刷新回复数据
						this.getReplyListData(this.parentId);
						//关闭回复框
						this.$refs.ygcComment.toggleMask('close');
						uni.showToast({
							icon: 'success',
							title: '回复成功'
						});
						text = '';
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.data
						});
					}
				}
			});
		}
	}
};
</script>

<style>
/* comment */
page {
	background-color: #f8f8f8;
}

.uni-padding-wrap {
	padding: 30upx;
}

view {
	font-size: 28upx;
}

.uni-comment {
	padding: 5rpx 0;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.uni-comment-list {
	flex-wrap: nowrap;
	padding: 10rpx 0;
	margin: 10rpx 0;
	width: 100%;
	display: flex;
}

.uni-comment-face {
	width: 70upx;
	height: 70upx;
	border-radius: 100%;
	margin-right: 20upx;
	flex-shrink: 0;
	overflow: hidden;
}

.uni-comment-face image {
	width: 100%;
	border-radius: 100%;
}

.uni-comment-body {
	width: 100%;
}

.uni-comment-top {
	line-height: 1.5em;
	justify-content: space-between;
}

.uni-comment-top text {
	color: #0a98d5;
	font-size: 24upx;
}

.uni-comment-date {
	line-height: 38upx;
	flex-direction: row;
	justify-content: space-between;
	display: flex !important;
	flex-grow: 1;
}

.uni-comment-date view {
	color: #666666;
	font-size: 24upx;
	line-height: 38upx;
}

.uni-comment-content {
	line-height: 1.6em;
	font-size: 28upx;
	padding: 8rpx 0;
}

.uni-comment-replay-btn {
	background: #fff;
	font-size: 24upx;
	line-height: 28upx;
	padding: 5rpx 20upx;
	border-radius: 30upx;
	color: #333 !important;
	margin: 0 10upx;
}
</style>
